import React, { Component } from 'react';
import {
  View,
  ScrollView,
  StyleSheet,
} from 'react-native';
import {
  Navbar,
  Spinner,
  HText,
} from '../../DodLibrary/index';

const H24 = HText.H24;



export default class SpinnerPage extends Component {
  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View style={styles.container}>
        <Navbar
          title="Spinner"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView
          contentContainerStyle={{
            alignItems: 'center',
          }}>

          <H24>
            Bounce
          </H24>
          <Spinner.Bounce
            top={20}
            color="#e91e63"
            verticalCenter
          />

          <H24>
            ChasingDots
          </H24>
          <Spinner.ChasingDots
            top={20}
            left={30} />

          <H24>
            Circle
          </H24>
          <Spinner.Circle top={20} />

          <H24>
            CircleFlip
          </H24>
          <Spinner.CircleFlip top={20} />

          <H24>
            CubeGrid
          </H24>
          <Spinner.CubeGrid top={20} />

          <H24>
            FadingCircleAlt
          </H24>
          <Spinner.FadingCircleAlt top={20} />

          <H24>
            Pulse
          </H24>
          <Spinner.Pulse top={20} />

          <H24>
            ThreeBounce
          </H24>
          <Spinner.ThreeBounce top={20} />

          <H24>
            WanderingCubes
          </H24>
          <Spinner.WanderingCubes top={20} />

          <H24>
            Wave
          </H24>
          <Spinner.Wave top={20} />
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});
